<template>
	<view>
		<swiperTabHead 
		:tabBars="tabBars" 
		:tabIndex="tabIndex"
		@tabtap="tabtap"
		>	
		</swiperTabHead>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" 
			:style="{height:swiperheight+'px'}" 
			:current="tabIndex"
			@change="tabChange"
			>
				<swiper-item v-for="(items,index) in newlists" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length>0">
							<!-- 图文列表 -->
							<block v-for="(item, key) in items.list" :key="key">
								<indexList :item="item" :index="key"></indexList>
							</block>
							<!-- 上拉加载 -->
							<loadMore :loadtext="items.loadtext"></loadMore>
						</template>
						<template v-else>
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			
			</swiper>
		</view>
	</view>
</template>

<script>
	import indexList from "../../components/index/index-list.vue";
	import swiperTabHead from "../../components/index/swiper-tab.vue";
	import loadMore from "../../components/common/load-more.vue";
	import noThing from "../../components/common/no-thing.vue";
	export default {
		components: {
			indexList,
			swiperTabHead,
			loadMore,
			noThing
		},
		data() {
			return {
				swiperheight:500,
				tabIndex: 0,
				newlists: [
					{
						loadtext:"上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img",
								titlepic: "../../static/demo/datapic/11.jpg",
								infonum: {
									index: 0,
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video",
								titlepic: "../../static/demo/datapic/11.jpg",
								palynum: "20w",
								long: "2:47",
								infonum: {
									index: 1,
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img",
								titlepic: "../../static/demo/datapic/11.jpg",
								infonum: {
									index: 2,
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img",
								titlepic: "../../static/demo/datapic/11.jpg",
								infonum: {
									index: 0,
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video",
								titlepic: "../../static/demo/datapic/11.jpg",
								palynum: "20w",
								long: "2:47",
								infonum: {
									index: 1,
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img",
								titlepic: "../../static/demo/datapic/11.jpg",
								infonum: {
									index: 2,
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list: []
					},
					{
						loadtext:"上拉加载更多",
						list: []
					},
					{
						loadtext:"上拉加载更多",
						list: []
					},
					{
						loadtext:"上拉加载更多",
						list: []
					}
				],
				tabBars: [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}, {
					name: '热点',
					id: 'redian'
				}, {
					name: '财经',
					id: 'caijing'
				}, {
					name: '娱乐',
					id: 'yule'
				}],
				list: [{
						userpic: "../../static/demo/userpic/12.jpg",
						username: "昵称",
						isguanzhu: false,
						title: "我是标题",
						type: "img",
						titlepic: "../../static/demo/datapic/11.jpg",
						infonum: {
							index: 0,
							dingnum: 11,
							cainum: 11
						},
						commentnum: 10,
						sharenum: 10
					},
					{
						userpic: "../../static/demo/userpic/12.jpg",
						username: "昵称",
						isguanzhu: true,
						title: "我是标题",
						type: "video",
						titlepic: "../../static/demo/datapic/11.jpg",
						palynum: "20w",
						long: "2:47",
						infonum: {
							index: 1,
							dingnum: 11,
							cainum: 11
						},
						commentnum: 10,
						sharenum: 10
					},
					{
						userpic: "../../static/demo/userpic/12.jpg",
						username: "昵称",
						isguanzhu: false,
						title: "我是标题",
						type: "img",
						titlepic: "../../static/demo/datapic/11.jpg",
						infonum: {
							index: 2,
							dingnum: 11,
							cainum: 11
						},
						commentnum: 10,
						sharenum: 10
					}
				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
			    success: (res)=>{
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height
			       
			    }
			});
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'../search/search'
			})
		},
		methods: {
			tabtap(index) {
				this.tabIndex = index
			},
			tabChange(e) {
				this.tabIndex = e.detail.current
			},
			loadmore(index) {
				if(this.newlists[index].loadtext !="上拉加载更多"){return;}
				this.newlists[index].loadtext="加载中...";
				setTimeout(()=>{
					let obj = {
						userpic: "../../static/demo/userpic/12.jpg",
						username: "昵称",
						isguanzhu: true,
						title: "我是标题",
						type: "video",
						titlepic: "../../static/demo/datapic/11.jpg",
						palynum: "20w",
						long: "2:47",
						infonum: {
							index: 1,
							dingnum: 11,
							cainum: 11
						},
						commentnum: 10,
						sharenum: 10
					};
					this.newlists[index].list.push(obj);
					this.newlists[index].loadtext="上拉加载更多";
				}, 1000);
				
				//this.newlists[index].loadtext="没有更多数据了";
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0) {
				
			} else if(e.index == 1) {
				uni.navigateTo({
					url: '../add-input/add-input'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
